<template>
    <div>
        <van-nav-bar title="" left-text="确认订单" left-arrow @click-left="onClickLeft" />
        <van-notice-bar left-icon="volume-o" text="部分疫情地区暂时无法发货，请注意地址是否正确，以免给您添加不必要的麻烦" />
    </div>

    <van-swipe-cell style="background-color:aliceblue">
        <van-radio-group v-model="checked" @click="chioseAddress">
            <van-radio icon-size="15px" style="padding:10px;font-size:19px">张三 123456<br>
                浙江省杭州市西湖区文三路 138号东方通信大厦 7楼501室
            </van-radio>

        </van-radio-group>
    </van-swipe-cell>
    <!-- <van-popup v-model:show="showlocation" round position="bottom" :style="{ height: '90%' }">
        <van-nav-bar title="添加地址" />
        <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete" @change-detail="onChangeDetail" />
    </van-popup> -->

    <van-swipe-cell v-for="item in productList" :key="item.id">
        <van-card :price="item.price" :title="item.name" :num="item.num" :thumb="item.url" />
    </van-swipe-cell>
    <!-- 优惠券单元格 -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true"
        style="margin-bottom:100px" />

    <!-- 优惠券列表 -->
    <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
            @change="onChange" @exchange="onExchange" />
    </van-popup>
    <van-submit-bar :price="showtotalPrice()" :disabled="butt" button-text="提交订单" @click="onSubmit" />


</template>

<script setup lang="ts">
import { useCart } from '@/hooks/cart';
import { Toast, } from 'vant';
import { ref } from 'vue';
import { areaList } from '@vant/area-data';
import router from '@/router/index';
import { Dialog } from 'vant';

const { cartList, productList,showtotalPrice } = useCart()

const chosenAddressId = ref('1');
const showlocation = ref(false);
const butt=ref(true)
// const checked=ref(false)


const onClickLeft = () => history.back();



//地址栏
const checked = ref('1');

//添加地址
// const searchResult = ref([]);

// const onSave = () => Toast('save');
// const onDelete = () => Toast('delete');
// const onChangeDetail = (val) => {
//     if (val) {
//         searchResult.value = [

//         ];
//     } else {
//         searchResult.value = [];
//     }
//     return {
//         onSave,
//         onDelete,
//         areaList,
//         searchResult,
//         onChangeDetail,
//     };
// };
//优惠券
const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592999,
    valueDesc: '1.5',
    unitDesc: '元',
}



const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = (code) => {
    coupons.value.push(coupon);
};

// return {
//   coupons,
//   showList,
//   onChange,
//   onExchange,
//   chosenCoupon,
//   disabledCoupons: [coupon],
// };


const chioseAddress=()=>{

    butt.value=false
    
}

//支付成功提示
const onSubmit = () => {
    const total=showtotalPrice()
    console.log(total);
    
    if (total==0) {
        Dialog.alert({
            message: '亲，您还没有选择商品！',
        }).then(() => {
            // on close
        });
    } else {
        Toast.success('支付成功')

        router.push({ path: "/order" })

    }

}



</script>

<style scoped>

</style>